<template>
  <div class="date_area">
    <div class="picker">
      <van-button
        class="btn"
        round
        size="mini"
        @click="area = true"
        color="#1790FD"
        >贵阳市</van-button
      >
      <van-button
        class="btn"
        round
        size="mini"
        @click="date = true"
        color="#1790FD"
        >2020/9/20</van-button
      >
    </div>
    <van-popup v-model="area" round position="bottom">
      <van-picker
        show-toolbar
        title="选择地区"
        :columns="areaColumns"
        @cancel="area = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="date" round position="bottom">
      <van-picker
        show-toolbar
        title="选择日期"
        :columns="dateColumns"
        @cancel="date = false"
        @confirm="onConfirm"
        @change="change"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      area: false,
      date: false,
      areaColumns: [
        {
          text: "浙江",
          children: [
            {
              text: "杭州",
              children: [{ text: "西湖区" }, { text: "余杭区" }],
            },
            {
              text: "温州",
              children: [{ text: "鹿城区" }, { text: "瓯海区" }],
            },
          ],
        },
        {
          text: "福建",
          children: [
            {
              text: "福州",
              children: [{ text: "鼓楼区" }, { text: "台江区" }],
            },
            {
              text: "厦门",
              children: [{ text: "思明区" }, { text: "海沧区" }],
            },
          ],
        },
      ],
      dateColumns: [],
    };
  },
  created() {
    this.getDateColumn();
  },
  methods: {
    // 构造日期选择数据结构
    getDateColumn() {
      let resultColumns = [];
      let date = new Date();
      let year = date.getFullYear();
      for (let i = 0; i < 10; i++) {
        let curYear = year - i;
        let obj = {
          text: curYear.toString(),
          value: curYear,
          children: [
            {
              text: "全部",
              value: 1,
              children: [{ text: "" }],
            },
            {
              text: "季度",
              value: 2,
              children: [
                { text: "第一季度", value: "Q1" },
                { text: "第二季度", value: "Q2" },
                { text: "第三季度", value: "Q3" },
                { text: "第四季度", value: "Q4" },
              ],
            },
            {
              text: "月份",
              value: 3,
              children: [
                { text: "一月", value: "01" },
                { text: "二月", value: "02" },
                { text: "三月", value: "03" },
                { text: "四月", value: "04" },
                { text: "五月", value: "05" },
                { text: "六月", value: "06" },
                { text: "七月", value: "07" },
                { text: "八月", value: "08" },
                { text: "九月", value: "09" },
                { text: "十月", value: "10" },
                { text: "十一月", value: "11" },
                { text: "十二月", value: "12" },
              ],
            },
          ],
        };
        resultColumns.push(obj);
      }
      // this.$set(this.dateColumns, resultColumns)
      this.dateColumns = resultColumns;
    },
    onConfirm() {},
    change(picker, values) {
      picker.setColumnValues(1, this.yearData(values[0]));
    },
    yearData(year) {
      let yearData = this.dateColumns
        .filter((item) => item.text === year)[0]
        .children.map((item2) => {
          return { text: item2.text, value: item2.value };
        });
      return yearData;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common/styles.scss";
.date_area {
  overflow: hidden;
  .picker {
    margin: 15px 20px;
    @include fl(row, space-between);
    .btn {
      padding: 5px 15px;
    }
  }
}
</style>
